<template>
    <div class="pd10">
        <el-form ref="CustomerForm" :inline="true" :model="CustomerForm" class="tpl-form-inline pb0">
            <el-form-item label="服务">
                <el-select v-model="CustomerForm.safeName" placeholder="全部">
                    <el-option label="基础天气服务" value="基础天气服务"></el-option>
                    <el-option label="尊享避灾服务" value="尊享避灾服务"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="渠道" style="margin: 0 5%;">
                <el-radio-group v-model="CustomerForm.messageChannel">
                    <el-radio label="App"></el-radio>
                    <el-radio label="短信"></el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item label="灾害类型">
                <el-select v-model="CustomerForm.weatherType" placeholder="全部">
                    <el-option label="暴雨" value="暴雨"></el-option>
                    <el-option label="暴雪" value="暴雪"></el-option>
                    <el-option label="冰雹" value="冰雹"></el-option>
                    <el-option label="结冰" value="结冰"></el-option>
                    <el-option label="积水" value="积水"></el-option>
                    <el-option label="台风" value="台风"></el-option>
                </el-select>
            </el-form-item>
        </el-form>
        <div class="mt10 mb20">
            <el-button type="primary" icon="el-icon-plus" @click="handleEdit" :disabled="loading">新增消息模板</el-button>
            <el-button icon="el-icon-search" @click="queryList" :disabled="loading">查询</el-button>
            <el-button @click="reset" icon="el-icon-refresh" :disabled="loading">重置</el-button>
        </div>
        <el-table class="sd" stripe border :data="tableData" v-loading="loading">
            <el-table-column align="center" prop="safeName" label="服务名称"></el-table-column>
            <el-table-column align="center" prop="messageChannel" label="消息渠道"></el-table-column>
            <el-table-column align="center" prop="weatherType" label="受灾类型"></el-table-column>
            <el-table-column align="center" prop="isUse" label="是否生效"></el-table-column>
            <el-table-column align="center" prop="date" label="设置时间"></el-table-column>
            <el-table-column label="操作">
                <template slot-scope="scope">
                    <el-button type="text" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                    <el-button type="text" @click="handleDelete(scope.$index)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
    </div>
</template>

<script>
    export default {
        name: 'messageTemplate',
        data () {
            return {
                CustomerForm: {
                    safeName: '',
                    messageChannel: '',
                    weatherType: '',
                },
                tableData: [], newData: [],
                loading: false,
            }
        },
        mounted () {
            this.$nextTick(()=>{
                this.getList();
            })
        },
        computed: {
        },
        methods: {
            handleEdit (i,r) {
                if(i != undefined || r != undefined){
                    this.$routerTo('editMessage', { messageData: r, type: 'edit', callback: this.getList });
                }else{
                    this.$routerTo('editMessage', { type: 'add', callback: this.getList });
                }
            },
            handleDelete(i){
                this.$confirm('此操作将永久删除该信息, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    let cData = JSON.parse(localStorage.getItem('messageData'));
                    cData.splice(i,1)
                    localStorage.setItem('messageData', JSON.stringify(cData));
                    this.getList()
                    this.$message({
                        type: 'success', message: '删除成功!'
                    });
                }).catch(() => {
                    this.$message({
                        type: 'info', message: '已取消删除'
                    });          
                });
            },
            queryList(){
                this.params = { ...this.CustomerForm }
                delete this.params.birthday
                for (let key in this.params) {
                    if (!this.params[key] || this.params[key] === '' || this.params[key].length === 0) {
                        delete this.params[key]
                    }
                }
                if (this.CustomerForm.birthday && this.CustomerForm.birthday.length === 2) {
                    this.params.birthdayStart = new Date(new Date(new Date(this.CustomerForm.birthday[0]).setHours(0)).setMinutes(0)).setSeconds(0)
                    this.params.birthdayEnd = new Date(new Date(new Date(this.CustomerForm.birthday[1]).setHours(0)).setMinutes(0)).setSeconds(0) + 24 * 3600 * 1000
                }
                this.tableData = this.$filters(this.params, this.newData);
            },
            // 重置表单
            reset () {
                this.CustomerForm = {
                    safeName: '',
                    messageChannel: '',
                    weatherType: '',
                };
                this.$nextTick(() => {
                    this.getList();
                })
            },
            getList(){
                let cData = JSON.parse(localStorage.getItem('messageData'));
                if(!cData){
                    cData = [
                        {"index": "1","safeName": "基础天气服务","messageChannel": "APP,短信","weatherType": "-","isUse": "生效","date": "2020-7-21 17:12:29"},
                        {"index": "2","safeName": "尊享避灾服务","messageChannel": "短信","weatherType": "暴雨","isUse": "生效","date": "2020-7-21 17:12:29"},
                        {"index": "3","safeName": "尊享避灾服务","messageChannel": "APP","weatherType": "冰雹","isUse": "生效","date": "2020-7-21 17:12:29"},
                    ];
                }
                this.tableData = cData;
                this.newData = cData;
                localStorage.setItem('messageData', JSON.stringify(cData));
            },
            exportFile () {
                if(this.CustomerForm.birthday[0] || this.CustomerForm.vCode != "" || this.CustomerForm.bsType !== "" || this.CustomerForm.bxType !== "" || this.CustomerForm.zjType !== ""){
                    this.$message({ type: 'success', message: `导出成功!` })
                }else{
                    this.$message.warning('请先选择筛选条件！')
                }
            },
        }
    }
</script>

<style scoped>
    .title{color: #333333;font-size: 16px;line-height: 19px;font-family: 'MicrosoftYaHei';font-weight: bold;padding-left: 4px;padding-top: 5px;}
    .fs{font-family: 'MicrosoftYaHei';font-size: 14px;color: #686786;line-height: 19px;}
</style>
